<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>model</title>
	<meta name="author" content="Stark" />
	<!-- Date: 2018-10-24 -->
	<style type="text/css">
		.addBg {
			background: #f00;
			color: #fff;
		}
		.bigger {
			font-size: 20px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			// 添加一个样式，removeClass移除一个样式
			$("thead tr").addClass("addBg").removeClass('addBg').addClass("bigger");
			// 判断是否存在某个样式
			alert($("thead tr").hasClass("bigger"));

			/**
			 * 为tr添加了两个事件，鼠标移动上去（添加样式）和移走事件（删除样式）
			 * 为了相对简单的实现第一次做某个操作，第二个事件做某个操作这样的功能，jQuery提供
			 * 了toggleClass()--->这个方法指的是判断是否有 这个类，如果有就删除，如果没有就添加
			 */			
			/*$("tbody tr").mouseover(function() {
				$(this).addClass("addBg");
			}).mouseout(function() {
				$(this).removeClass("addBg");
			});*/
			
			$("tbody tr").mouseover(changeBg).mouseout(changeBg);
			
		});
		
		function changeBg(){
			$(this).toggleClass("addBg");
		}
	</script> 
</head>
<body>
	<table width="700" border="1" align="center" id="users">
		<thead>
			<tr>
				<td title="userId">用户标识</td>
				<td title="username">用户姓名</td>
				<td title="age">用户年龄</td>
				<td title="password">用户密码</td>
				<td title="address">地址</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<tr id="abc">
				<td>1</td>
				<td>张三</td>
				<td>23</td>
				<td>abc123</td>
				<td>南京</td>
				<td>添加 删除</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>33</td>
				<td>abc123</td>
				<td>南京</td>
				<td>添加 删除</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>13</td>
				<td>abc123</td>
				<td>南京</td>
				<td>添加 删除</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>45</td>
				<td>abc123</td>
				<td>南京</td>
				<td>添加 删除</td>
			</tr>
			<tr>
				<td>5</td>
				<td>朱七</td>
				<td>21</td>
				<td>abc123</td>
				<td>南京</td>
				<td>添加 删除</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

